<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script>
    // const nextTick = function () {
    //   const callbacks = [];
    //   let pending = false;
    //   const p = Promise.resolve;
    //   let resolve;

    //   const timeFunc = () => {
    //     p().then(() => {
    //       if (resolve) {
    //         resolve();
    //         resolve = null;
    //       }

    //       const tempCallBack = [...callbacks];
    //       callbacks.length = 0;

    //       for(const cb of tempCallBack) {
    //         try {
    //             cb()
    //         } catch(err) {
    //             return new TypeError('nextTick回调执行失败')
    //         }
    //       }

    //     });
    //     // 这里是为了当前没有异步任务执行时启动一个标记为true 触发宏任务，
    //     // 确保微任务中的回调队列能够执行，即使微任务失败了，宏任务也能作为保底

    //     if (!pending) {
    //       pending = true;
    //       setTimeout(() => {}, 0);
    //     }
    //   };

    //   return function (fn) {
    //     callbacks.push(fn);
    //     if (!resolve) {
    //       // 这里作用是异步执行完立即充值状态
    //       resolve = () => {
    //         pending = false;
    //       };

    //       timeFunc();
    //     }
    //   };
    // };

    const nextTick = function () {
      const callbacks = [];
      let pending = false;
      const p = Promise.resolve;
      let timerFunc;
      let pendingCallbacks = [];

      // 确保只添加一个定时器
      const ensureMacroTask = () => {
        if (!pending) {
          pending = true;
          timerFunc();
        }
      };

      // 使用微任务队列
      timerFunc = () => {
        p().then(flushCallbacks);

        // 如果是浏览器环境，添加一个宏任务作为后备
        if (typeof window !== 'undefined') {
          setTimeout(() => {}, 0);
        }
      };

      // 执行所有回调函数
      const flushCallbacks = () => {
        pending = false;
        const copies = callbacks.slice(0);
        callbacks.length = 0;
        pendingCallbacks = copies;

        for (let i = 0; i < copies.length; i++) {
          try {
            copies[i]();
          } catch (e) {
            console.error('nextTick 回调执行错误:', e);
          }
        }
      };

      return function (fn) {
        callbacks.push(fn);
        ensureMacroTask();
      };
    };

    const nextTick1 = function () {
      const callbacks = [];
      let pending = false;
      const p = Promise.resolve;

      const flushCallbacks = function () {
        pending = false;
        const pendingCallback = callbacks.slice(0)
        callbacks.length = 0
        for(const cb of pendingCallback) {
            try {
                cb()
            } catch (error) {
                console.error('回调执行失败', error)
            }
            
        }
      };

      const asyncTask = () => {
        p().then(flushCallbacks)
        if(typeof window !== 'undefined') {
            pending = false
            setTimeout(() => {}, 0)
        }
      }

      const ensureCallbacks = () => {
        if(!pending) {
            pending = true
            asyncTask() 
        }
      }

      return function(fn) {
        callbacks.push(fn)
        ensureCallbacks()

      }
    };
  </script>
  <body></body>
</html>
